import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

class BottomSheetDemo extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => BottomSheetState();
}

class BottomSheetState extends State<BottomSheetDemo> {
  final _bottomSheetScaffoldKey = GlobalKey<ScaffoldState>();
  var _words = <String>['第一个','第二个','第三个','第四个','第五个','第六个'];
  var _icons = <IconData>[Icons.phone,Icons.pause,Icons.add,Icons.help,Icons.info,Icons.animation];
  ScrollController _controller = ScrollController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _bottomSheetScaffoldKey,
      appBar: AppBar(
        title: Text('BottomSheet'),
        centerTitle: true,
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            RaisedButton(
              color: Colors.blue,
              textColor: Colors.white,
              onPressed: () {
                _openbottomSheet(context);
              },
              child: Text('showBottomSheet()'),
            ),
            RaisedButton(
              color: Colors.blue,
              textColor: Colors.white,
              onPressed: () {
                _openshowModelBottomSheet();
              },
              child: Text('showModelBottomSheet()'),
            ),
          ],
        ),
      ),
    );
  }

  _openbottomSheet(context) {
    _bottomSheetScaffoldKey.currentState!.showBottomSheet((context) {
      return BottomAppBar(
        child: Container(
          height: 90,
          //double.infinity 和父控件一样大
          width: double.infinity,
          padding: EdgeInsets.all(16),
          child: Row(
            children: <Widget>[
              Icon(Icons.pause),
              SizedBox(
                width: 16,
              ),
              Text('01:30/03:30'),
              Expanded(
                  child: Text(
                '七里香-周杰伦',
                textAlign: TextAlign.right,
                style: TextStyle(
                  fontSize: 15,
                ),
              ))
            ],
          ),
        ),
      );
    });
  }

  _openshowModelBottomSheet() {
    showModalBottomSheet(
        context: context,
        builder: (BuildContext context) {
          return ListView.separated(
              physics: BouncingScrollPhysics(),
              controller: _controller,
              itemBuilder: (context, index) {
                return ListTile(
                  leading: Icon(_icons[index]),
                  title: Text(_words[index]),
                );
              },
              separatorBuilder: (context,index){
                return Divider(
                  height: 2,
                  indent: 10,
                  endIndent: 10,
                );
              },
              itemCount: _words.length);
        });
  }
}
